<template>
	<view
		class="cust_bg_main"
		:style="{
			'--borcolor': parameter.borColor || '#876d59',
			'--btnbg': parameter.btnBg || '#684833',
			'--fontbg': parameter.fontBg || '#d3bf9e',
			'--contbg': parameter.contBg || '#473425',
			'--btn_fontBg': parameter.btn_fontBg || '#d3bf9e',
			'--price_color': parameter.price_color || '#e55c27',
		}"
	>
		<view v-for="(item, index) in dataList" :key="index" class="cust_item" @click="goProdDetail(item)">
			<view class="cust_img">
				<view class="img"><u-lazy-load :image="item.logo || vuex_config.errImg" img-mode="aspectFill"></u-lazy-load></view>
			</view>
			<view class="cust_cont">
				<view class="prod_name">{{ item.name }}</view>
				<view class="price_box">
					<view class="cust_price_item">
						<span class="sign">￥</span>
						<span class="price_num">{{ item.price }}</span>
					</view>
					<view class="buy_btn">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {
		parameter: {
			type: Object,
			default: () => {
				return {};
			}
		},
		dataList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {};
	},
	filters: {
		priceFmt(price, isPoint = false) {
			let [priceInt, pricePoint] = price.split('.');
			return isPoint ? (pricePoint ? '.' + pricePoint : '') : priceInt;
		}
	},
	methods: {
		goProdDetail(item) {
			if (item.type == 2) {
				let currentTime = new Date().getTime();
				if (currentTime > item.end_date) {
					this.$toast({
						title: '活动已结束'
					});
					return;
				}
			}
			this.$toProd({
				...item,
				prodType: 1
			});
		}
	}
};
</script>

<style scoped lang="scss">
.cust_bg_main {
	padding: 10px 10px 1px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.cust_item {
		margin-bottom: 10px;
		width: calc(50% - 6px);
		border: 3px solid var(--borcolor);
		.cust_img {
			height: 0;
			padding-bottom: 120%;
			position: relative;
			.img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
		.cust_cont {
			background-color: var(--contbg);
			padding: 0 7px;
			.prod_name {
				padding: 10px 0;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				color: var(--fontbg);
			}
			.price_box {
				border-top: 1px solid var(--btnbg);
				padding: 10px 0;
				display: flex;
				align-items: center;
				.cust_price_item {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: var(--price_color);
					.sign {
						font-size: 12px;
					}
					.price_num {
						font-size: 18px;
						font-style: italic;
						margin-left: -2px;
					}
				}
				.buy_btn {
					line-height: normal;
					font-size: 12px;
					padding: 2px 9px;
					border-radius: 20px;
					overflow: hidden;
					color: var(--btn_fontBg);
					background-color: var(--btnbg);
				}
			}
		}
	}
}
</style>
